<template>
  <div>
    <Row class="page-title-wrapper">
      <Col :lg="{span:6}" :md="{span:24}">
        <div class="page-title">
          <h3>设计值配置</h3>
        </div>
      </Col>
      <Col :lg="{span:18}" :md="{span:24}" class="padding-left">
        <div class="search-form-wrapper">
          <Form :model="searchForm" class="search-form" inline ref="searchForm">
            <div>
              <FormItem prop="name">
                <Input placeholder="请输入表名称" v-model="searchForm.name"/>
              </FormItem>
              <FormItem prop="nodeName">
                <Input placeholder="请输入所属节点" v-model="searchForm.nodeName"/>
              </FormItem>
            </div>
            <FormItem>
              <Button @click="handleSearchClick" type="primary">查询</Button>
              <Button @click="handleResetForm">重置</Button>
            </FormItem>
          </Form>
        </div>
      </Col>
    </Row>
    <Row>
      <Col :lg="{span:6}" :md="{span:24}" class="padding-right my-scollor">
        <h3>{{ projectName }}</h3>
        <contract-tree
          ref="treeRef"
          :showProcedureOpr="false"
          @onNodeClick="onNodeClick"/>
      </Col>
      <Col :lg="{span:18}" :md="{span:24}" class="padding-left">
        <Table
          ref="tableRef"
          :data="tableData"
          :page="page"
          :total="total"
          @getoutputList="getoutputList"
          @page-change="handlePageChange"
          @pagesize-change="handlePageSizeChange"
          @table-edit-click="handleTableRowEditClick"
          @table-view-click="handleTableRowViewClick"
        />
      </Col>
    </Row>
  </div>
</template>

<script>
import Table from './component/table';
import ContractTree from './component/contract-tree';

import { getProject } from '@/libs/util';
import { getDesignValuesList } from '@/api/manage-design-value';
import { getCheckTypeList } from '@/api/common.js';

export default {
  name: 'design_value_config',
  components: {
    ContractTree,
    Table
  },
  data () {
    return {
      searchForm: {
        type: '',
        name: ''
      },
      projectName: getProject(),

      typeList: [], // 类型选择项
      selectNodeId: '',
      noLength: true,
      nodeId: -1,
      tableData: [],
      total: 100,
      page: {
        curPage: 1,
        pageSize: 10
      },
      // table组件选中的列表
      outputList: []
    };
  },
  mounted () {
    this.getDesignValuesList();
    this.getCheckTypeList();
  },
  methods: {
    onNodeClick (selectNodeId) {
      this.page.curPage = 1;
      this.selectNodeId = selectNodeId;
      this.getDesignValuesList();
    },
    async getDesignValuesList () {
      const data = {
        pageSize: this.page.pageSize,
        pageNum: this.page.curPage
      };
      if (this.selectNodeId) {
        data.nodeId = this.selectNodeId;
      }
      if (this.searchForm.nodeName) {
        data.nodeName = this.searchForm.nodeName;
        data.nodeId = ''; // 搜索节点，去除nodeId
      }
      if (this.searchForm.name) {
        data.reportName = this.searchForm.name;
      }
      console.log('node click callback');
      const resp = await getDesignValuesList(data);
      const info = resp.data;

      this.tableData = info.data;
      this.total = info.total;
    },
    handleResetForm () {
      this.$refs.searchForm.resetFields();
      this.page.curPage = 1;
      this.getDesignValuesList();
    },
    handleSearchClick () {
      this.page.curPage = 1;
      this.selectNodeId = '';
      this.$refs.treeRef.reset();
      this.getDesignValuesList();
    },
    handlePageChange (page) {
      this.page.curPage = page;
      this.getDesignValuesList();
    },
    handlePageSizeChange (pageSize) {
      this.page.pageSize = pageSize;
      this.getDesignValuesList();
    },
    handleTableRowEditClick (row) {
      const query = { ...row };
      this.$router.push({
        path: 'design_value_config/edit',
        query
      });
    },
    handleTableRowViewClick (row) {
      const query = { ...row };
      this.$router.push({
        path: 'design_value_config/view',
        query
      });
    },
    getoutputList (result) {
      this.outputList = result.outputList;
      result.outputList.length === 0
        ? (this.noLength = true)
        : (this.noLength = false);
    },

    async getCheckTypeList () {
      const resp = await getCheckTypeList();
      // console.log('typelist', JSON.stringify(resp, 2, 2));
      this.typeList = resp.data.data;
    }
  }
};
</script>

<style lang="less" scoped>
.search-form {
  display: flex;
  justify-content: space-between;

  .ivu-input {
    width: 160px;
  }

  .ivu-select {
    width: 160px;
  }

  .ivu-btn:first-child {
    margin-right: 10px;
  }

  > .ivu-form-item:last-child {
    margin-right: 0;
  }
}

@import '../../../assets/css/hoverscollor.css';

</style>
